<template>
	<div class="platformChannel realTimeDataClass" :style="{width:pageWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				<span class="title1">当前位置/运营报表/平台-渠道</span>
				<span>{{title}}</span>
			</div>
			<div class="right_header_time">
				<div class="block">
					<span>选择日期范围：</span>
					<el-date-picker
						size='small'
						v-model="date"
						type="daterange"
						align="left"
						placeholder="选择日期范围"
						@change='dateChange'
						:picker-options="pickerOptions"></el-date-picker>
				</div>
			</div>
		</div>
		<div class="right_main">
			<div class="list1">
				<div class="list1_title">
					<p>总体数据</p>
					<div class="list1_intro">
						<el-popover
							ref="popover1"
							placement="top-start"
							title="总体数据"
							width="200"
							trigger="hover"
							content="总体数据">
						</el-popover>
						<i class="el-icon-information"  v-popover:popover1></i>
					</div>
					<el-button type="primary" size="mini" class="excel"  @click="excel('1','运营报表-平台渠道-总体数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i>
						导出excel
					</el-button>
				</div>
				<div class="table1">
					<el-table :data="tableData1" border style="width: 100%" :row-class-name="tableRowClassName"  v-loading="loading" element-loading-text="拼命加载中">
						<el-table-column v-for="(val,key) in tableHeader1" :fixed="val.fixed"  :prop="val.prop" :key="key" :label="val.label" align="center" :width="val.width"></el-table-column>
					</el-table>
				</div>
			</div>
			<div class="list2">
				<div class="list2_title">
					<p>平台渠道详细数据</p>
					<div class="list2_intro">
						<el-popover
							ref="popover2"
							placement="top-start"
							title="平台渠道详细数据"
							width="200"
							trigger="hover"
							content="平台渠道详细数据">
						</el-popover>
						<i class="el-icon-information"  v-popover:popover2></i>
					</div>
				</div>
				<div class="table21">	
					<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"  @select="handle">
						<el-menu-item index="0">
							<i class="iconfont">&#xe642;</i> 全部平台
						</el-menu-item>
						<el-menu-item index="2">
							<i class="iconfont">&#xe766;</i> iOS
						</el-menu-item>
						<el-menu-item index="3">
							<i class="iconfont">&#xe60c;</i> 安卓
						</el-menu-item>
					</el-menu>
					<div class="table2_title">
						<p>平台详细数据</p>
						<el-button type="primary" size="mini" class="excel"  @click="excel('All21','运营报表-平台渠道-平台详细数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							<i class="icon iconfont">&#xe7f0;</i>
							导出excel
						</el-button>
					</div>
					<el-table :data="tableData21" border v-loading="loading" element-loading-text="拼命加载中" @sort-change="sortChange">
						<el-table-column v-for="(val,key) in tableHeaderAll21" :prop="val.prop" :key="key" :label="val.label" align="center" sortable="true" :width="val.width" :fixed="val.fixed" ></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange1"
							@current-change="handleCurrentChange1"
							:current-page="page1.currentPage"
							:page-sizes="page1.pageSizes"
							:page-size="page1.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page1.dataTotal">
						</el-pagination>
					</div>
					<div class="table2_title">
						<p>渠道汇总数据</p>
						<el-button  type="primary" size="mini" class="excel"  @click="excel('All22','运营报表-平台渠道-渠道汇总数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							<i class="icon iconfont">&#xe7f0;</i>
							导出excel
						</el-button>
					</div>
					<el-table :data="tableData22" border v-loading="loading" element-loading-text="拼命加载中"  @sort-change="sortChange2">
						<el-table-column v-for="(val,key) in tableHeaderAll22" :prop="val.prop" :key="key" :label="val.label" align="center" :width="val.width" :fixed="val.fixed" sortable></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange2"
							@current-change="handleCurrentChange2"
							:current-page="page2.currentPage"
							:page-sizes="page2.pageSizes"
							:page-size="page2.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page2.dataTotal">
						</el-pagination>
					</div>
					<div class="table2_title">
						<p>渠道详细数据</p>
						<el-button type="primary" size="mini" class="excel"  @click="excel('All23','运营报表-平台渠道-渠道详细数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							<i class="icon iconfont">&#xe7f0;</i>
							导出excel
						</el-button>
					</div>
					<el-table :data="tableData23" border v-loading="loading" element-loading-text="拼命加载中"  @sort-change="sortChange3" >
						<el-table-column v-for="(val,key) in tableHeaderAll23" :prop="val.prop" :key="key" :label="val.label" align="center" :width="val.width" :fixed="val.fixed" sortable></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange3"
							@current-change="handleCurrentChange3"
							:current-page="page3.currentPage"
							:page-sizes="page3.pageSizes"
							:page-size="page3.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page3.dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./platformChannel.styl"></style>
<script src="./platformChannel.js"></script>